<script lang="ts" setup>
import { toRefs, ref, reactive, watch } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { FormInstance, TabsPaneContext } from "element-plus";
// import elementPlusIcons from "./elementPlusIcons";
import { IFormItem } from ".";

const props = defineProps({
  size: {
    type: String,
    default: "default",
  },
  labelPosition: {
    type: String,
    default: "left",
  },
  selectItem:{
    type: Object,
    default: () => {},
  },
  model: {
    type: Object,
    default: () => {},
  },
  items: {
    type: Array<IFormItem>,
    default: () => {
      return [];
    },
  },
  inline: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: "form",
  },
  actionSlot: {
    type: Boolean,
    default: false,
  },
  hiddenAction: {
    type: Boolean,
    default: false,
  },
  isDesign: {
    type: Boolean,
    default: false,
  },
});

const {
  size,
  labelPosition,
  selectItem,
  model,
  inline,
  items,
  type,
  actionSlot,
  hiddenAction,
  isDesign,
} = toRefs(props);
const emits = defineEmits(["onSubmit", "onSelect", "onChange"]);
const formRef = ref<FormInstance>();
const iconVisible = ref(false);
/**
 * tabs
 */
const activeName = ref("element");
const currentFormItem = reactive<IFormItem>({});
const handleFormItemClick = (item: IFormItem) => {
  emits("onSelect", item);
};
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
const selectIcon = (item: any, option: any) => {
  item.select(option.value);
  iconVisible.value = false;
};
const iconClick = () => {
  iconVisible.value = true;
};
/**
 * 函数
 */
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!",model.value);
      emits("onSubmit", model.value);
    } else {
      console.log("error submit!", fields);
    }
  });
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
const handleSubmit = () => {
  submitForm(formRef.value);
};
const handleClear = () => {
  resetForm(formRef.value);
};
watch(
  () => model,
  (val) => {
    emits("onChange", val);
  },
  {
    // immediate:true,
    deep: true,
  }
);
watch(()=>selectItem.value,(val)=>{
  for (const key in val) {
      if (Object.prototype.hasOwnProperty.call(val, key)) {
        const element = val[key];
        currentFormItem[key] = element;
      }
    }
},{
  deep:true
})
// watch(
//   () => items.value,
//   (val) => {
//     const lastIndex = val.length - 1;
//     const obj = val[lastIndex];
//     for (const key in obj) {
//       if (Object.prototype.hasOwnProperty.call(obj, key)) {
//         const element = obj[key];
//         currentFormItem[key] = element;
//       }
//     }
//   },
//   {
//     immediate: true,
//     deep: true,
//   }
// );
const getClassName = (item) => {
  let className = "";
  if (isDesign.value) {
    className = "form-design-item";
    if (item.id === (currentFormItem && currentFormItem.id)) {
      className = "form-design-item active";
    }
  }
  return className;
};
defineExpose({ handleSubmit, handleClear });
</script>
<template>
  <el-form
    ref="formRef"
    :model="model"
    :size="size"
    :label-position="labelPosition"
  >
    <template v-for="(item, index) in items" :key="index">
      <div :class="getClassName(item)" @click="handleFormItemClick(item)">
        <el-form-item
          v-if="
            type === 'search' ||
            (type === 'add' && !item.addHidden) ||
            (type === 'edit' && !item.editHidden) ||
            (type === 'detail' && !item.detailHidden) ||
            type === 'form'
          "
          :label="item.label"
          :label-width="item.labelWidth"
          :prop="type === 'detail' ? undefined : item.prop"
          :rules="type === 'detail' ? undefined : item.rules"
        >
          <template v-if="item.type === 'radio'">
            <el-radio-group
              v-model="model[item.vModel]"
              :style="{ width: inline ? '400px' : '100%' }"
              :disabled="
                (type === 'add' && item.addDisabled) ||
                (type === 'edit' && item.editDisabled) ||
                type === 'detail'
              "
            >
              <el-radio
                v-for="(option, optionsIndex) in item.options"
                :key="optionsIndex"
                :value="option.value"
                >{{ option.label }}</el-radio
              >
            </el-radio-group>
          </template>
          <template v-else-if="item.type === 'checkbox'">
            <el-checkbox-group
              v-model="model[item.vModel]"
              :style="{ width: inline ? '400px' : '100%' }"
              :disabled="
                (type === 'add' && item.addDisabled) ||
                (type === 'edit' && item.editDisabled) ||
                type === 'detail'
              "
            >
              <el-checkbox
                v-for="(option, optionsIndex) in item.options"
                :key="optionsIndex"
                :label="option.label"
                :value="option.value"
              />
            </el-checkbox-group>
          </template>
          <template v-else-if="item.type === 'select'">
            <el-select
              v-model="model[item.vModel]"
              :placeholder="item.placeholder"
              :multiple="item.multiple"
              :style="{ width: inline ? '400px' : '100%' }"
              :disabled="
                (type === 'add' && item.addDisabled) ||
                (type === 'edit' && item.editDisabled) ||
                type === 'detail'
              "
            >
              <el-option
                v-for="(option, optionsIndex) in item.options"
                :key="optionsIndex"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </template>
          <template v-else-if="item.type === 'cascader'">
            <el-cascader
              v-model="model[item.vModel]"
              :options="item.treeOptions"
              :placeholder="item.placeholder"
              :props="{
                expandTrigger: 'hover',
              }"
              :style="{ width: inline ? '400px' : '100%' }"
              @change="item.change"
            />
          </template>
          <template v-else-if="item.type === 'textarea'">
            <el-input
              v-model="model[item.vModel]"
              :autosize="{ minRows: 5, maxRows: 10 }"
              type="textarea"
              :autocomplete="item.autocomplete"
              :placeholder="item.placeholder"
              :clearable="item.clearable"
              :style="{ width: inline ? '400px' : '100%' }"
              :readonly="
                (type === 'add' && item.addReadonly) ||
                (type === 'edit' && item.editReadonly) ||
                type === 'detail'
              "
            />
          </template>
          <template v-else-if="item.type === 'password'">
            <el-input
              v-model="model[item.vModel]"
              :autocomplete="item.autocomplete"
              :placeholder="item.placeholder"
              :clearable="item.clearable"
              type="password"
              show-password
              :style="{ width: inline ? '400px' : '100%' }"
              :readonly="
                (type === 'add' && item.addReadonly) ||
                (type === 'edit' && item.editReadonly) ||
                type === 'detail'
              "
            />
          </template>
          <template v-else-if="item.type === 'avatar'">
            <el-upload
              class="avatar-uploader"
              :action="item.actionUrl"
              :show-file-list="false"
              :headers="item.headers"
              :on-success="item.success"
              :before-upload="item.beforeUpload"
              :style="{ width: inline ? '400px' : '100%' }"
            >
              <img
                v-if="model[item.vModel]"
                :src="model[item.vModel]"
                class="avatar"
              />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </template>
          <template v-else-if="item.type === 'number'">
            <el-input
              v-model.number="model[item.vModel]"
              type="number"
              :autocomplete="item.autocomplete"
              :placeholder="item.placeholder"
              :clearable="item.clearable"
              :style="{ width: inline ? '400px' : '100%' }"
              :readonly="
                (type === 'add' && item.addReadonly) ||
                (type === 'edit' && item.editReadonly) ||
                type === 'detail'
              "
            />
          </template>
          <template v-else-if="item.type === 'switch'">
            <el-switch
              v-model="model[item.vModel]"
              :active-value="1"
              :inactive-value="0"
            />
          </template>
          <template v-else-if="item.type === 'date'">
            <el-date-picker
              v-model="model[item.vModel]"
              type="date"
              value-format="X"
              format="YYYY-MM-DD HH:mm:ss"
              :placeholder="item.placeholder"
            />
          </template>
          <template v-else-if="item.type === 'daterange'">
            <el-date-picker
              v-model="model[item.vModel]"
              type="daterange"
              range-separator="-"
              value-format="X"
              format="YYYY-MM-DD HH:mm:ss"
              :start-placeholder="
                item.placeholders ? item.placeholders[0] : '请选择开始日期'
              "
              :end-placeholder="
                item.placeholders ? item.placeholders[1] : '请选择结束日期'
              "
            />
          </template>
          <template v-else-if="item.type === 'datetime'">
            <el-date-picker
              v-model="model[item.vModel]"
              type="datetime"
              value-format="X"
              format="YYYY-MM-DD HH:mm:ss"
              :placeholder="item.placeholder"
            />
          </template>
          <template v-else-if="item.type === 'datetimerange'">
            <el-date-picker
              v-model="model[item.vModel]"
              type="datetimerange"
              range-separator="-"
              value-format="X"
              format="YYYY-MM-DD HH:mm:ss"
              :start-placeholder="
                item.placeholders ? item.placeholders[0] : '请选择开始日期'
              "
              :end-placeholder="
                item.placeholders ? item.placeholders[1] : '请选择结束日期'
              "
            />
          </template>
          <template v-else-if="item.type === 'tree'">
            <el-tree-select
              v-model="model[item.vModel]"
              :data="item.options"
              :check-strictly="true"
              :render-after-expand="false"
              :placeholder="item.placeholder"
              :style="{ width: inline ? '400px' : '100%' }"
              :disabled="
                (type === 'add' && item.addDisabled) ||
                (type === 'edit' && item.editDisabled) ||
                type === 'detail'
              "
            />
          </template>
          <template v-else-if="item.type === 'button'">
            <el-button @click="item.click(item.value)">{{
              item.btnText
            }}</el-button>
          </template>
          <template v-else>
            <el-input
              v-model="model[item.vModel]"
              :autocomplete="item.autocomplete"
              :placeholder="item.placeholder"
              :clearable="item.clearable"
              :style="{ width: inline ? '400px' : '100%' }"
              :readonly="
                (type === 'add' && item.addReadonly) ||
                (type === 'edit' && item.editReadonly) ||
                type === 'detail'
              "
            />
          </template>
        </el-form-item>
      </div>
    </template>
    <template v-if="!hiddenAction">
      <el-form-item>
        <template v-if="actionSlot">
          <slot name="action" :form-ref="formRef"></slot>
        </template>
        <template v-else>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button @click="handleClear">清空</el-button>
        </template>
      </el-form-item>
    </template>
  </el-form>
</template>
<style>
.form-design-item {
  margin: 10px;
  padding: 10px;
}
.active {
  border: 3px solid #409eff;
}
/* .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
.icon-list {
    overflow-y: scroll;
    list-style: none;
    padding: 0 !important;
    border-top: 1px solid var(--el-border-color);
    border-left: 1px solid var(--el-border-color);
    border-radius: 4px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    height: 300px;
    .icon-item {
        text-align: center;
        color: var(--el-text-color-regular);
        height: 90px;
        font-size: 13px;
        border-right: 1px solid var(--el-border-color);
        border-bottom: 1px solid var(--el-border-color);
        transition: background-color var(--el-transition-duration);
    }
    .svg-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        cursor: pointer;
    }
} */
</style>
